<script setup>
import { ref } from 'vue'
import { getData } from '@/api'
const data = ref([])        // 数据
const data_render = ref([])
let arr = ['全城']
const region = ref([])// 城区列表
const curIndex = ref(0)     //当前城区下标
const chosable = ref(false) // 是否展开折叠

getData({cityId:500100,ticketFlag:1,k:791417}).then(res =>{ 
  data.value = res.data.data.cinemas
  data_render.value = data.value
  data.value.forEach( item => arr.push(item.districtName))
  arr = new Set(arr)
  region.value = [...arr]
  console.log(data.value)
})

const changeRegion = ( i, districtName) => {
  districtName = districtName === '全城' ? '': districtName
  curIndex.value = i
  data_render.value = data.value.filter( item => item.districtName.includes(districtName))
  chosable.value = !chosable.value
}

</script>

<template>
  <header>
    <div class="mainArea">
      <span>重庆<svg t="1749125123176" class="icon" viewBox="0 0 1024 1024" version="1.1"
          xmlns="http://www.w3.org/2000/svg" p-id="5368" width="44" height="44">
          <path
            d="M783.957333 452.096a64 64 0 0 0-83.968-5.717333l-6.485333 5.717333-196.096 196.096L301.226667 452.096a64 64 0 0 0-83.968-5.717333l-6.485334 5.717333a64 64 0 0 0-5.717333 83.968l5.717333 6.570667 241.322667 241.322666a64 64 0 0 0 83.968 5.717334l6.570667-5.717334L783.957333 542.72a64 64 0 0 0 0-90.453333z"
            fill="#2c2c2c" p-id="5369"></path>
        </svg></span><span>影院</span><svg t="1749124933168" class="icon" viewBox="0 0 1024 1024" version="1.1"
        xmlns="http://www.w3.org/2000/svg" p-id="4347" width="200" height="200">
        <path
          d="M782.165333 701.724444a369.777778 369.777778 0 1 0-80.440889 80.440889l111.388445 111.388445a56.888889 56.888889 0 0 0 80.440889-80.440889l-111.388445-111.388445z m-117.589333-399.189333Q739.555556 377.514667 739.555556 483.555556q0 106.040889-74.979556 181.020444Q589.596444 739.555556 483.555556 739.555556q-106.040889 0-181.020445-74.979556Q227.555556 589.596444 227.555556 483.555556q0-106.040889 74.979555-181.020445Q377.514667 227.555556 483.555556 227.555556q106.040889 0 181.020444 74.979555z"
          fill="#3A3A3A" p-id="4348"></path>
      </svg>
    </div>
    <div class="exactArea">
      <label @click="chosable=!chosable">{{region[curIndex]}}<svg t="1749125123176" class="icon" viewBox="0 0 1024 1024" version="1.1"
          xmlns="http://www.w3.org/2000/svg" p-id="5368" width="15" height="15">
          <path
            d="M783.957333 452.096a64 64 0 0 0-83.968-5.717333l-6.485333 5.717333-196.096 196.096L301.226667 452.096a64 64 0 0 0-83.968-5.717333l-6.485334 5.717333a64 64 0 0 0-5.717333 83.968l5.717333 6.570667 241.322667 241.322666a64 64 0 0 0 83.968 5.717334l6.570667-5.717334L783.957333 542.72a64 64 0 0 0 0-90.453333z"
            fill="#2c2c2c" p-id="5369"></path>
        </svg></label><label>App订票<svg t="1749125123176" class="icon" viewBox="0 0 1024 1024" version="1.1"
          xmlns="http://www.w3.org/2000/svg" p-id="5368" width="15" height="15">
          <path
            d="M783.957333 452.096a64 64 0 0 0-83.968-5.717333l-6.485333 5.717333-196.096 196.096L301.226667 452.096a64 64 0 0 0-83.968-5.717333l-6.485334 5.717333a64 64 0 0 0-5.717333 83.968l5.717333 6.570667 241.322667 241.322666a64 64 0 0 0 83.968 5.717334l6.570667-5.717334L783.957333 542.72a64 64 0 0 0 0-90.453333z"
            fill="#2c2c2c" p-id="5369"></path>
        </svg></label><label>就近去过<svg t="1749125123176" class="icon" viewBox="0 0 1024 1024" version="1.1"
          xmlns="http://www.w3.org/2000/svg" p-id="5368" width="15" height="15">
          <path
            d="M783.957333 452.096a64 64 0 0 0-83.968-5.717333l-6.485333 5.717333-196.096 196.096L301.226667 452.096a64 64 0 0 0-83.968-5.717333l-6.485334 5.717333a64 64 0 0 0-5.717333 83.968l5.717333 6.570667 241.322667 241.322666a64 64 0 0 0 83.968 5.717334l6.570667-5.717334L783.957333 542.72a64 64 0 0 0 0-90.453333z"
            fill="#2c2c2c" p-id="5369"></path>
        </svg></label>
    </div>
    <div v-if="chosable" class="foldArea">
      <ol>
        <li
        v-for="(item, index) in region"
        @click="changeRegion(index, item)"
        :key="item"
        :class="{'active': curIndex === index}"
        >{{ item }}</li>
      </ol>
    </div>
  </header>
  <main>
    <ul>
      <li
      v-for="item in data_render"
      @click="$router.push({name:'cinema_detail',params:{'cinemaId':item.cinemaId}})"
      :key="item.cinemaId">
        <div><section>{{ item.name }}</section><p>￥<b>{{ item.lowPrice/100}}</b>起</p></div>
        <div><span>{{ item.address }}</span><span>距离未知</span></div>
      </li>
    </ul>
  </main>
</template>

<style lang="scss" scoped>
header {
  width: 100vw;
  height: .94rem;
  color: rgb(0, 0, 0);
  border-bottom: 1px solid #ededed;
  position: fixed;
  background-color: white;
  .mainArea {
    height: .44rem;
    display: flex;
    padding: 0 10px;
    justify-content: space-between;
    align-items: center;
    font-size: .14rem;

    span {
      display: flex;
      align-items: center;

      svg {
        width: .1rem;
        height: .1rem;
      }
    }

    svg {
      width: .2rem;
    }
  }

  .exactArea {
    line-height: .5rem;
    height: .5rem;
    display: flex;
    justify-content: space-around;
    font-size: .14rem;
  }

  >div {
    border-bottom: 1px solid #ededed;
  }
  .foldArea{
    height: 4.6rem;
    background-color: white;
    font-size: .12rem;
    ol
    {
      display: flex;
      flex-wrap: wrap;
    } li{
      width: .8125rem;
      height: .3rem;
      margin-left: .1rem;
      margin-top: .14rem;
      text-indent: 1em;
      overflow: hidden;
      text-wrap: nowrap;
      text-overflow: ellipsis;
      line-height: .27rem;
      border: 1px solid rgb(121,125,130);
      color: rgb(121,125,130);
    }
    .active{
      color: rgb(255, 95, 22);
      border-color: rgb(255, 95, 22);
    }
  }
}
main{
  padding-top: .94rem;
  padding-bottom: .5rem;
  div{
    user-select: none;
  }
}
ul li{
  padding: 15px;
  height: 75px;
  font-size: .14rem;
  color: black;
  border-bottom: 1px solid #ededed;
  div{
    display: flex;
    justify-content: space-between;
    b{
      padding: 0 .02rem;
      font-size: .18rem;
    }
    p{
      font-size: .12rem;
      color:#ff5f16;
    }
    span,section{
      display: block;
      width: 80%;
      overflow: hidden;
      text-overflow: ellipsis;
      text-wrap: nowrap;
    }
    span{
      color:#797d82;
    }
     section{
      font-size: .16rem;
      width: 60%;
    }
    & span:last-child{
      text-align: right;
    }
  }
}
</style>
